<template>
  <div class="wrapper h-100">
    <div class="d-flex">
      <!--用户列表-->
      <div style="flex: 1;overflow: hidden;">
        <el-form class="ur-form mb-3" :inline="true" style="height: 54px;">
          <el-form-item label="状态" >
            <el-select class="w150" size="small" v-model="form.state">
              <el-option label="全部" :value="-1"></el-option>
              <el-option label="启用" value="1" ></el-option>
              <el-option label="禁用" value="0" ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="角色" >
            <el-select class="w150" size="small" v-model="form.type">
              <el-option label="全部" :value="-1"></el-option>
              <el-option v-for="item in roles" :key="item.Id" :label="item.Name" :value="item.Id" ></el-option>
            </el-select>
          </el-form-item>
          <el-button class="ur-btn ur-btn-primary" @click="currentPage=1,queryUser()">
            <i class="iconfont icon-search"></i>查询
          </el-button>
          <el-button class="d-inline-block ur-btn ur-btn-primary" @click="userDig=true">
            <i class="iconfont icon-add"></i>添加用户
          </el-button>
        </el-form>
        <!--表格-->
        <el-table class="ur-table" ref="tableDom1" stripe :data="users" :height="clientHeight-130>400?clientHeight-130:400" highlight-current-row @row-click="rowClick" @selection-change="selsChange">
          <el-table-column align="center" type="index" :index="indexMethod" label="序号" width="50"></el-table-column>
          <el-table-column type="selection" width="50" align="center"></el-table-column>
          <el-table-column v-for="(v,index) in tables.columns" :prop="v.field" :label="v.title" :min-width="v.width" align="center" :key="index">
            <template slot-scope="scope">
       <!--   <span v-if="v.field=='RoleId'">
            <template >{{roleType[scope.row.RoleId]}}</template>
          </span>-->
              <span v-if="v.field=='RoleType'">
            <template >{{roleType[scope.row.RoleType]}}</template>
          </span>
              <!--短信发送状态-->
              <span v-else-if="v.field=='Enabled'">
            <template v-if="scope.row.Enabled===1"><i class="circle success"></i>启用</template>
            <template v-else-if="scope.row.Enabled===0"><i class="circle error"></i>禁用</template>
            <template v-else></template>
          </span>
              <!--接收短信-->
              <span v-else-if="v.field=='hasMsg'" :class="scope.row.Enabled==1?'text-success':'text-danger'">{{scope.row.Enabled==1?'接收':'不接收'}}</span>
              <!--其他-->
              <span v-else>{{scope.row[v.field]}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" width="120">
            <template slot="header" slot-scope="scope">
              <label>操作</label>
            </template>
            <template slot-scope="scope">
              <el-button class="ur-btn ur-btn-waring d-inline-block">
                <i class="font18 iconfont icon-edit mr-0" @click="userEdit(scope.row)"></i>
              </el-button>
              <el-button class="ur-btn ur-btn-danger d-inline-block">
                <i class="font18 iconfont icon-delete mr-0" @click="userDel(scope.$index,scope.row)"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <div class="mt-3">
          <el-pagination size="small" class="float-right " @size-change="handleSizeChange" @current-change="handleCurrentChange"
                         layout="total, sizes, prev, pager, next, jumper" :page-sizes="[100,200,500,1000]"
                         :current-page="currentPage" :page-size="pageSize" :total="total"></el-pagination>
        </div>
      </div>
      <!-- 用户区域权限-->
      <div class="card ml-3" style="flex:0 0 400px;width: 400px;">
        <div class="card-header">
          <span class="te">区域权限</span>
        </div>
        <div class="card-body " :style="{height:clientHeight-84+'px'}">
          <div class="d-flex mb-3" >
            <el-input placeholder="请输入内容" class="input-with-select w180 mr-2" size="small" v-model="searchAreaTxt"></el-input>
            <el-button @click="RegionQueryLike" class="ur-btn ur-btn-primary w80"><i class="iconfont icon-search"></i>查询</el-button>
            <el-button class="ur-btn ur-btn-primary w80" @click="areaDig=true,area={}"><i class="iconfont icon-add"></i>添加</el-button>
          </div>
          <div class="arealits scrollY" :style="{height:clientHeight-190+'px'}">
            <el-tree ref="areaTree" default-expand-all :data="areaList" show-checkbox node-key="Id" :props="defaultProps"></el-tree>
          </div>
          <el-button @click="saveUserAreas" class="ur-btn ur-btn-primary w80 mt-4 mb-2"><i class="iconfont icon-save"></i>保存</el-button>
        </div>
      </div>
    </div>

    <el-dialog class="ur-form-dialog" v-el-drag-dialog title="添加用户" :visible.sync="userDig" width="660px" style="margin-top:11vh;"  @close="closeDialog(false)">
      <adduser v-if="userDig" @closeDialog="closeDialog($event)" :user="user"></adduser>
    </el-dialog>

    <el-dialog class="ur-form-dialog" v-el-drag-dialog title="添加区域" :visible.sync="areaDig" width="500px" style="margin-top:11vh;" @close="closeAreaDialog(false)">
      <addarea v-if="areaDig" @closeAreaDialog="closeAreaDialog($event)" :area="area"></addarea>
    </el-dialog>

  </div>
</template>

<script>
  import elDragDialog from 'directive/el-dragDialog'
  import adduser from './adduser'
  import addarea from '../area/addarea'
  import { mapState } from 'vuex'
  import api from 'api/api'

  export default {
    directives:{elDragDialog},
    components: {
      adduser,
      addarea
    },
    props: {},
    data() {
      return {
        total: 0,
        currentPage: 1,
        pageSize:100,
        form:{state:-1,type:-1},
        tables: {
          sel: null,//选中行
          columns: [
            {field: "Name", title: "用户名称", width: '120'},
            // {field: "RoleId", title: "角色名称", width: '100'},
            {field: "RoleType", title: "角色类型", width: '100'},
            {field: "Enabled", title: "启用状态", width: '100'},
            {field: "Mobile", title: "手机号", width: '130'},
            {field: "Mail", title: "邮箱", width: '150'},
            {field: "hasMsg", title: "是否接收短信", width: '100'},
            {field: "Remark", title: "备注", width: '70'},
          ]
        },
        sels:[],
        searchTxt: '',
        userDig: false,
        users: [],
        user: {},
        searchAreaTxt: "",
        areaList: [],
        areaDig: false,
        area: {},
        roleType:{0:'业主',1:'养护单位','-1':'权限管理员','-2':'日志管理员'},
        roles:[],
        isIndeterminate: false,
        checkAll: false,
        defaultProps: {
          children: 'Childs',
          label: 'Name'
        }
      }
    },
    watch: {},
    computed: mapState({
      clientHeight: state => state.comm.clientHeight,
      clientWidth: state => state.comm.clientWidth,
      limits:state=>state.user.userInfo.limits
    }),
    methods: {
      indexMethod(index) {
        return index + 1
      },
      handleSizeChange(val) {
        this.pageSize = val
      },
      handleCurrentChange(val) {
        this.currentPage = val
      },
      rowClick(row, event, column){
        this.user=row
        api.fetchSimple('/User/QueryUserRegions',{userId:row.Id})
            .then(r=>{
              this.$refs.areaTree.setCheckedKeys(r)
            })
      },
      selsChange(sels) {
        this.sels = sels
        this.sels.splice(0, 0)
      },
      closeDialog(v) {
        this.userDig = v;
      },
      closeAreaDialog(v) {
        this.areaDig = v;
      },
      queryRole(){
        api.fetch('/Role/Query',{}).then(r=>{
          this.roles=r
          this.roles.map(role=>{
            this.$set(this.roleType,role.Id,role.Name)
          })
        })
      },
      queryUser(){
        api.fetchSimple('/User/QueryLike',{value:this.searchTxt}).then(r=>{
          this.users=r
        })
      },
      userEdit(row){
        this.user=row
        this.userDig=true
      },
      userDel(rowIndex,row){

      },
      saveUserAreas(){
        let regionIds=this.$refs.areaTree.getCheckedKeys()//getCheckedNodes
        if(!this.user.Id) return this.$message.warning('请选择其中一位用户')
        if(!regionIds.length) return this.$message.warning('请勾选责任区')
        api.fetchSimple('/User/UpdateUserRegion',{userId:this.user.Id,regionIds:regionIds})
            .then(r=>{
              this.$message.success({showClose:true,message:'绑定成功'})
            })
      },
      delArea(area) {
        var ids = [];
        ids.push(area.Id);
        this.$confirm('确认删除该区域及该区域所属设施？', '提示', { type: 'warning' })
            .then(() => {
              api.fetch('/Region/Delete', ids).then(r => {
                this.RegionQueryLike();
                this.$message.success({showClose:true,message:'删除成功'})
              })
            })
      },
      RegionQueryLike() {
        api.fetchSimple('/ViewInfo/QueryRegionsForTree', {}).then(r => {
          this.areaList = r;
        })
      },
    },
    created() {
      // this.queryRole()
      this.queryUser()
      this.RegionQueryLike()
    },
    mounted() {
    }
  }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
  .arealits ul li {width: 100%;border-bottom: 1px solid #cccccc;padding: 8px 0 8px 30px}
  .arealits {padding: 10px}
  #box .el-input--suffix .el-input__inner {width: 115px;}
  .energy_c {height: 100%;width: 100%}
  .energy_c ul {width: 100%;margin-left: 20px;}
  .energy_c li {width: 319px;height: 182px;border-radius: 5px;float: left;margin: 0 15px 20px 0;
    border: 1px solid rgba(225, 225, 225, 1);
    box-shadow: 0px 6px 6px rgba(168, 168, 168, 0.298039215686275);
  }
  .energy_c li:last-child {margin-right: 0}
  .energy_c li {background-color: rgba(251, 174, 59, 1);}
  .energy_c li:first-child {background-color: #fff;}
  .e_dec{border-radius: 6px;}
  .e_dec .i-con {line-height: 30px;padding-top: 2px;float: right;color: #fff;}
  .e_dec .e-dis {width: 100%;height: 125px;overflow: hidden;}
  .e_dec .e-dis .dis_c {float: right;overflow: hidden;width: 55%;color: #fff;}
  .e_dec .e-dis .dis_c h1 {font-size: 18px;line-height: 30px}
  .e_dec .e-dis .dis_c p {font-size: 24px;font-weight: 400;line-height: 55px}
  .e_dec .e-dis .dis_c span {font-size: 18px;line-height: 20px;}
  .energy_c li dl {padding: 10px;line-height: 20px}
  .energy_c li dl dd {padding-left: 20px}
  .class1 {
    background: rgba(251, 174, 59, 1);
    box-shadow: 0px 6px 6px rgba(255, 157, 41, 0.298039215686275);
  }
  .class2 {
    background: rgba(138, 138, 138, 1);
    box-shadow: 0px 6px 6px rgba(168, 168, 168, 0.298039215686275);
  }
  .yuandian {
    position: absolute;bottom: 10px; right: 10px;
    width: 16px;height: 16px;border-radius: 12px;
    border: 3px solid #fff;background-color: transparent;
  }
  .energy_c li:first-child img:hover {opacity: 0.5}
</style>
